<template>
  <div>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>二手车信息管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="formInline" class="user-search">
        <el-form-item label="搜索：">
          <el-input size="small" v-model="formInline.id" placeholder="输入二手车编号"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input size="small" v-model="formInline.realname" placeholder="输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="add()" v-if="loginUser.role==2">添加</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="findCarType()" v-if="loginUser.role==1">查看二手车类型</el-button>

        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
                element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column align="center" type="selection" width="60"></el-table-column>
        <!--<el-table-column prop="id" label="编号" width="50px"></el-table-column>-->
        <el-table-column label="编号" width="60">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="二手车名称"></el-table-column>
        <el-table-column prop="desc" label="二手车描述" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="address" label="所在地"></el-table-column>
        <el-table-column prop="price" label="单价" sortable></el-table-column>

        <el-table-column property="img" label="二手车" align="center">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.img" :preview-src-list="scope.row.img | filterImg"/>  <!--需要图片过滤器-->
          </template>
        </el-table-column>

        <el-table-column prop="createtime" label="创建时间" sortable>
          <template slot-scope="scope">
            <p>{{formatDate(listData[scope.$index].createtime)}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="bycartype.name" label="所属类型" sortable></el-table-column>

        <el-table-column prop="sftg" label="通过状态" sortable  v-if="loginUser.role==1">
          <template slot-scope="scope">
            <el-switch v-model="listData[scope.$index].sftg==1?true:false" @change="sftgSwitch(scope.$index, scope.row)"></el-switch>
          </template>
        </el-table-column>

        <el-table-column prop="sftg" label="通过状态" width="100" v-if="loginUser.role==2">
          <template slot-scope="scope">
            <p v-if="listData[scope.$index].sftg==1" style="font-family: 华文楷体;font-weight: bold"><el-tag :type="'success'">已通过</el-tag></p>
            <p v-else style="font-family: 华文楷体;font-weight: bold"><el-tag :type="'primary'">未通过</el-tag></p>
          </template>
        </el-table-column>


        <el-table-column align="center" label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button size="mini" @click="update(scope.$index, scope.row)" v-if="loginUser.role==2">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <!-- 修改界面 -->
      <el-dialog :title="updateTitle" :visible.sync="updateFormVisible" width="30%" @click="closeDialog">
        <el-form label-width="120px" :model="updateForm" :rules="rules" ref="updateForm">

          <el-form-item label="二手车编号" prop="deptName" v-show="false">
            <el-input size="small" v-model="updateForm.id" auto-complete="off" placeholder="请输入账单编号"></el-input>
          </el-form-item>

          <el-form-item label="二手车名称" prop="deptNo">
            <el-input size="small" v-model="updateForm.name" auto-complete="off" placeholder="请输入账单名称"></el-input>
          </el-form-item>

          <el-form-item label="二手车描述" prop="deptNo">
            <el-input type="textarea" v-model="updateForm.desc" size="mini" rows="8"></el-input>
          </el-form-item>

          <el-form-item label="二手车所在地" prop="deptNo">
            <el-input size="small" v-model="updateForm.address" auto-complete="off" placeholder="请输入账单名称"></el-input>
          </el-form-item>

          <el-form-item label="单价" prop="deptNo">
            <el-input size="small" v-model="updateForm.price" auto-complete="off" placeholder="请输入账单名称"></el-input>
          </el-form-item>

          <el-upload
                  action="http://127.0.0.1:12002/upload/uploadImage"
                  list-type="picture-card"
                  :limit="1"
                  :on-preview="handlePictureCardPreview"
                  :on-success="uploadSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

          <el-form-item label="图片" prop="deptNo"  v-show="false">
            <el-input size="small" v-model="updateForm.img" auto-complete="off" placeholder="请输入账单名称"></el-input>
          </el-form-item>

          <el-form-item label="创建时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="updateForm.createtime" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker placeholder="选择时间" v-model="updateForm.createtime" style="width: 100%;"></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="所属二手车类型" prop="gender">
            <el-select v-model="updateForm.bycartypeid" placeholder="请选择">
              <el-option v-for="item in carType" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title"
                     @click="updateSave()">保存
          </el-button>
        </div>
      </el-dialog>

      <!-- 新增模态框界面 -->
      <el-dialog :title="addTitle" :visible.sync="addFormVisible" width="30%" @click="closeDialog">
        <el-form ref="addForm" :model="addForm" label-width="80px" :rules="rules">

          <el-form-item label="二手车名称" prop="deptNo">
            <el-input size="small" v-model="addForm.name" auto-complete="off" placeholder="请输入二手车名称"></el-input>
          </el-form-item>

          <el-form-item label="二手车描述" prop="deptNo">
            <el-input type="textarea" v-model="addForm.desc" size="mini" rows="8"></el-input>
          </el-form-item>

          <el-form-item label="所在地" prop="deptNo">
            <el-input size="small" v-model="addForm.address" auto-complete="off" placeholder="请输入二手车所在地"></el-input>
          </el-form-item>

          <el-form-item label="单价" prop="deptNo">
            <el-input size="small" v-model="addForm.price" auto-complete="off" placeholder="请输入二手车单价"></el-input>
          </el-form-item>

          <el-upload
                  action="http://127.0.0.1:12002/upload/uploadImage"
                  list-type="picture-card"
                  :limit="1"
                  :on-preview="handlePictureCardPreview"
                  :on-success="uploadSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

          <el-form-item label="图片" prop="deptNo" v-show="false">
            <el-input size="small" v-model="addForm.img" auto-complete="off" placeholder="请输入图片"></el-input>
          </el-form-item>

          <el-form-item label="创建时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="addForm.createtime" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker placeholder="选择时间" v-model="addForm.createtime" style="width: 100%;"></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="二手车类型" prop="gender">
            <el-select v-model="addForm.bycartypeid" placeholder="请选择">
              <el-option v-for="item in carType" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title"
                     @click="addSave()">保存
          </el-button>
        </div>

      </el-dialog>

      <!-- 二手车类型查看模态框界面 -->
      <el-dialog title="二手车类型管理" width="50%" :visible.sync="findCarTypeFormVisible" @click="closeDialog">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addCarType()">添加二手车类型</el-button>


        <!--列表-->
        <el-table size="small" :data="carTypeData" highlight-current-row v-loading="loading" border
                  element-loading-text="拼命加载中" style="width: 100%;">
          <el-table-column label="编号" width="60">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="二手车名称"></el-table-column>
          <el-table-column prop="desc" label="二手车描述" :show-overflow-tooltip="true"></el-table-column>

          <el-table-column prop="createtime" label="创建时间" sortable>
            <template slot-scope="scope">
              <p>{{formatDate(carTypeData[scope.$index].createtime)}}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" min-width="100">
            <template slot-scope="scope">
              <el-button size="mini" @click="updateCarType(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteCarType(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>


      </el-dialog>


      <!-- 二手车类型修改界面 -->
      <el-dialog :title="updateCarTypeTitle" :visible.sync="updateCarTypeFormVisible" width="30%" @click="closeDialog">
        <el-form label-width="120px" :model="updateCarTypeForm" :rules="rules" ref="updateForm">

          <el-form-item label="二手车编号" prop="deptName" v-show="false">
            <el-input size="small" v-model="updateCarTypeForm.id" auto-complete="off" placeholder="请输入账单编号"></el-input>
          </el-form-item>

          <el-form-item label="二手车名称" prop="deptNo">
            <el-input size="small" v-model="updateCarTypeForm.name" auto-complete="off" placeholder="请输入账单名称"></el-input>
          </el-form-item>

          <el-form-item label="二手车描述" prop="deptNo">
            <el-input type="textarea" v-model="updateCarTypeForm.desc" size="mini" rows="8"></el-input>
          </el-form-item>

          <el-form-item label="创建时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="updateCarTypeForm.createtime" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker placeholder="选择时间" v-model="updateCarTypeForm.createtime" style="width: 100%;"></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title"
                     @click="updateCarTypeSave()">保存
          </el-button>
        </div>
      </el-dialog>


      <!-- 二手车类型新增界面 -->
      <el-dialog :title="addCarTypeTitle" :visible.sync="addCarTypeFormVisible" width="30%" @click="closeDialog">
        <el-form label-width="120px" :model="addCarTypeForm" :rules="rules" ref="updateForm">

          <el-form-item label="二手车编号" prop="deptName" v-show="false">
            <el-input size="small" v-model="addCarTypeForm.id" auto-complete="off" placeholder="请输入账单编号"></el-input>
          </el-form-item>

          <el-form-item label="二手车名称" prop="deptNo">
            <el-input size="small" v-model="addCarTypeForm.name" auto-complete="off" placeholder="请输入账单名称"></el-input>
          </el-form-item>

          <el-form-item label="二手车描述" prop="deptNo">
            <el-input type="textarea" v-model="addCarTypeForm.desc" size="mini" rows="8"></el-input>
          </el-form-item>

          <el-form-item label="创建时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="addCarTypeForm.createtime" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker placeholder="选择时间" v-model="addCarTypeForm.createtime" style="width: 100%;"></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title"
                     @click="addCarTypeSave()">保存
          </el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                nshow: true, //switch开启
                fshow: false, //switch关闭
                loading: false, //是显示加载
                addFormVisible: false, //控制编辑页面显示与隐藏
                findCarTypeFormVisible: false, //控制编辑页面显示与隐藏
                updateFormVisible: false, //控制编辑页面显示与隐藏

                updateCarTypeFormVisible: false, //控制编辑页面显示与隐藏
                addCarTypeFormVisible: false, //控制编辑页面显示与隐藏

                dialogImageUrl: '',
                dialogVisible: false,

                loginUser:JSON.parse(localStorage.getItem('loginUser')),


                item:{
                    picUrl:'http://192.168.0.104:8123/CggYHlZcIRKAZJ14AAFEe8EpzYc879.jpg'
                },

                updateTitle: '修改',
                updateForm: {
                    id: '',
                    name: '222',
                    desc: '222',
                    address: '222',
                    price: '222',
                    img: '222',
                    createtime: '1526700200000',
                    bycartypeid:'',
                    byloginid:'',
                    sftg:''
                },

                addTitle: '添加',
                addForm: {
                    name: '',
                    desc: '',
                  address: '',
                    price: '',
                    img: '',
                    createtime: '1526700200000',
                    bycartypeid:'',
                    byloginid:'',
                    sftg:''
                },

                updateCarTypeTitle: '修改',
                updateCarTypeForm: {
                    id: '',
                    name: '222',
                    desc: '222',
                    createtime: '1526700200000',
                },

                addCarTypeTitle: '添加',
                addCarTypeForm: {
                    name: '',
                    desc: '',
                    createtime: '1526700200000',
                },

                // rules表单验证
                rules: {
                    id: [{required: true, message: '请输入二手车名称', trigger: 'blur'}],
                    carname: [{required: true, message: '请输入登录名称', trigger: 'blur'}],
                    password: [{required: true, message: '请输入登录密码', trigger: 'blur'}],
                    realname: [{required: true, message: '请输入真实姓名', trigger: 'blur'}],
                    gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
                    email: [{required: true, message: '请输入电子邮箱', trigger: 'blur'}],
                    mobile: [{required: true, message: '请输入联系方式', trigger: 'blur'}],
                    role: [{required: true, message: '请输入权限', trigger: 'blur'}],
                    sczt: [{required: true, message: '请输入审核状态', trigger: 'blur'}]
                },
                formInline: {
                    id: '',
                    title: '',
                },
                // 删除部门
                seletedata: {
                    ids: '',
                    token: localStorage.getItem('cartoken')
                },
                userparm: [], //搜索权限
                listData: [], //二手车数据
                carTypeData: [], //二手车类型数据
                carType: [], //二手车数据
                // 分页参数
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 10
                },
                toURLFindAll:''
            }
        },
        /**
         * 创建完毕
         */
        created() {
            //权限数据审计
            let loginUser = JSON.parse(localStorage.getItem('loginUser'));

            if(loginUser.role==1){
                //管理员
                this.toURLFindAll = "car/findAll";
            }else{
                //卖家
                this.toURLFindAll = "car/findAllByByloginid?byloginid="+this.loginUser.id;
            }

            this.getdata(this.formInline);

        },
        filters: {
            // 图片预览过滤
            filterImg(item) {
                if (typeof item === "string") {
                    return item.split("|");
                }else{
                    return item
                }
            },
        },

        /**
         * 里面的方法只有被调用才会执行
         */
        methods: {
            // 获取公司列表
            getdata() {
                // 表格加载开始
                // this.loading = true
                const _this = this;

                let res;
                axios.get(localStorage.getItem("globalUrl") + this.toURLFindAll).then(function(resp){
                    for(let i = 0 ;i <resp.data.data.length;i++){
                        // resp.data.data[i].createtime = _this.formatDate(resp.data.data[i].createtime);

                        // resp.data.data[i].identi = (resp.data.data[i].identi==''||resp.data.data[i].identi==null)?'暂无标识':resp.data.data[i].identi;

                        // resp.data.data[i].sczt = (resp.data.data[i].sczt==0)?'未审核':'已审核';
                    }
                    _this.listData = resp.data.data;

                    // 表格加载结束
                    _this.loading = false
                });

                axios.get(localStorage.getItem("globalUrl") + "carType/findAll").then(function(resp){
                    _this.carType  = resp.data.data;
                    _this.carTypeData  = resp.data.data;

                    // 表格加载结束
                    _this.loading = false
                });


            },

            filterTag(value, row) {
                return row.tag === value;
            },
            formatDate(value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? "0" + MM : MM;
                let d = date.getDate();
                d = d < 10 ? "0" + d : d;
                let h = date.getHours();
                h = h < 10 ? "0" + h : h;
                let m = date.getMinutes();
                m = m < 10 ? "0" + m : m;
                let s = date.getSeconds();
                s = s < 10 ? "0" + s : s;
                return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
            },

            // 搜索事件
            search() {
                const _this = this;
                axios.post(localStorage.getItem("globalUrl") + "car/findAll",this.formInline).then(function(resp){

                    _this.listData = resp.data.data;

                    // 表格加载结束
                    _this.loading = false
                });

            },
            //信息修改监听
            update: function (index, row) {
                this.updateForm = row;
                this.updateFormVisible = true;
            },
            //信息修改
            updateSave(){
                // this.updateForm =
                const _this = this;
                axios.put(localStorage.getItem("globalUrl") + "car/update",this.updateForm).then(function(){
                    _this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                });

                this.updateFormVisible = false; //控制编辑页面显示与隐藏
            },
            //信息增加监听
            add: function () {
                this.addFormVisible = true;
            },
            //信息新增
            addSave(){
                // this.addForm =

                const _this = this;
                this.addForm.role = (this.addForm.role=='管理员')?1:2;

                this.addForm.byloginid = this.loginUser.id;
                axios.post(localStorage.getItem("globalUrl") + "car/add",this.addForm).then(function(){

                    axios.get(localStorage.getItem("globalUrl") + _this.toURLFindAll).then(function(resp){
                        _this.listData = resp.data.data;

                        _this.$message({
                            type: 'success',
                            message: '新增成功!'
                        });

                        // 表格加载结束
                        _this.loading = false
                    });
                    _this.addFormVisible = false; //控制编辑页面显示与隐藏

                });



            },
            //二手车类型信息增加监听
            findCarType: function () {
                this.findCarTypeFormVisible = true;
            },
            //二手车类型信息修改监听
            updateCarType: function (index, row) {
                this.updateCarTypeForm = row;
                this.updateCarTypeFormVisible = true;
            },
            //二手车类型信息修改
            updateCarTypeSave(){
                // this.updateForm =
                const _this = this;
                axios.put(localStorage.getItem("globalUrl") + "carType/update",this.updateCarTypeForm).then(function(){
                    _this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                });

                this.updateCarTypeFormVisible = false; //控制编辑页面显示与隐藏
            },
            //二手车类型信息增加监听
            addCarType: function () {
                this.addCarTypeFormVisible = true;
            },
            //二手车类型信息新增
            addCarTypeSave(){
                // this.addForm =
                const _this = this;
                axios.post(localStorage.getItem("globalUrl") + "carType/add",this.addCarTypeForm).then(function(){

                    axios.get(localStorage.getItem("globalUrl") + "carType/findAll").then(function(resp){
                        _this.carTypeData = resp.data.data;

                        _this.$message({
                            type: 'success',
                            message: '新增成功!'
                        });

                        // 表格加载结束
                        _this.loading = false
                    });
                    _this.addCarTypeFormVisible = false; //控制编辑页面显示与隐藏

                });



            },// 删除二手车类型
            deleteCarType(index, row) {
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    const _this = this;

                    axios.delete(localStorage.getItem("globalUrl") + 'carType/delete?id='+row.id).then(function(){
                        axios.get(localStorage.getItem("globalUrl") + "carType/findAll").then(function(resp){
                            _this.carTypeData = resp.data.data;

                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                            // 表格加载结束
                            _this.loading = false
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })

                })
            },

            // 删除公司
            deleteUser(index, row) {
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    const _this = this;

                    axios.delete(localStorage.getItem("globalUrl") + 'car/delete?id='+row.id).then(function(){
                        axios.get(localStorage.getItem("globalUrl") + this.toURLFindAll).then(function(resp){
                            _this.listData = resp.data.data;

                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                            // 表格加载结束
                            _this.loading = false
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })

                })
            },
            // 关闭编辑、增加弹出框
            closeDialog() {
                this.addFormVisible = false
            },
            //直接修改switch是否禁用状态
            sftgSwitch(index, row){
                const _this = this;

                row.sftg = row.sftg==1?0:1;

                console.log(row.sftg)

                axios.put(localStorage.getItem("globalUrl") + "car/update",row).then(function(resp){

                    if(resp.data.data.sftg){
                        _this.$message({
                            type: 'success',
                            message: '已解除 '+resp.data.data.realname+' 账户禁用'
                        })
                    }else{
                        _this.$message({
                            type: 'info',
                            message: '已禁用 '+resp.data.data.realname+' 账户'
                        })

                    }

                });
            },

            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

            uploadSuccess(response, file, fileList){
                this.updateForm.img = response;
                this.addForm.img = response;
            },


        }
    }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }
</style>
